//- this mixin builds panel with a button
//- to trigger a specific animation on a target element
mixin anim-panel-manual(animation)
  // START panel
  .panel.panel-default(id='panel-anim-#{animation}')
    .panel-heading
      = animation
    .panel-body
      // Animation trigger
      a(href='#',animate="", data-target="#panel-anim-#{animation}", data-play="#{animation}")
        em.fa.fa-play.fa-2x
  // END panel


h3 Animations
  small animo is a powerful little tool that makes managing CSS animations extremely easy. 
- var animations = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flip','flipInX','flipInY','flipOutX','flipOutY','lightSpeedIn','lightSpeedOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','rollIn','rollOut','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp']

// START row
.row
  - each val in animations
    .col-md-2
      +anim-panel-manual(val)
// END row

h3.page-header Trigger Animations on Scroll
.row
  .col-md-4
    // START panel
    .panel.panel-default(animate="", data-play="bounceIn", data-offset="0")
      .panel-heading bounceIn
      .panel-body 
        code animate
        code data-play="bounceIn" 
        code data-offset="0"

    // END panel
  .col-md-4
    // START panel
    .panel.panel-default(animate="", data-play="fadeInDown", data-offset="0")
      .panel-heading fadeInDown
      .panel-body 
        code animate
        code data-play="fadeInDown" 
        code data-offset="0"
    // END panel
  .col-md-4
    // START panel
    .panel.panel-default(animate="", data-play="fadeInLeftBig", data-offset="0", data-delay="1000")
      .panel-heading fadeInLeftBig
      .panel-body 
        code animate
        code data-play="fadeInLeftBig" 
        code data-offset="0" 
        code data-delay="1000"
    // END panel


